<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<base th:href="@{/}" />
<title>Insert title here</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/Managerstyle.css" />
<style>
select{
	display: inline;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}
</style>
</head>
<body>
	<div class="contain">
		<h3>查看个人成绩</h3>
		请选择学期：
		<select id="selectTyear" style="width: 150px">
			<option value="">请选择年份</option>
			<option th:each="year:${yearList}" th:value="${year}" th:text="${year}"></option>
		</select>
		<select id="selectTid" style="width: 150px">
			<option value="">请选择学期</option>
		</select>
		<button type="button" class="btn btn-primary" id="selectTerm">查询</button>
		<table class="table">
			<tr>
				<td>学期</td>
				<td>开课院系</td>
				<td>课程号</td>
				<td>课程名称</td>
				<td>任课教师</td>
				<td>成绩</td>
				<td>学分</td>
				<td>学时</td>
				<td>及格标志</td>
			</tr>
			<tbody id="displayTable">
				<tr th:each="grade:${gradeList}" th:object="${grade.coursePlan}">
					<td th:text="*{lessionPlan.term.termName}"></td>
					<td th:text="*{lessionPlan.course.acadamy.acdmname}"></td>
					<td th:text="*{lessionPlan.course.cid}"></td>
					<td th:text="*{lessionPlan.course.cname}"></td>
					<td th:text="*{teacher.tname}"></td>
					<td th:text="${grade.grade}"></td>
					<td th:text="*{lessionPlan.course.credit}"></td>
					<td th:text="*{lessionPlan.course.ctime}"></td>
					<td th:text="${grade.pass}==1?及格:不及格"></td>
				</tr>
			</tbody>
		</table>
	</div>
	<script>
		$(document).ready(function(){
			
			$("#selectTerm").click(function(){
				$.ajax({
					url: "stu/selectGradeByTermId",
					type: "GET",
					data: {termId: $("#selectTid").val()},
					success: function(data){
						$("#displayTable").empty();
						$.each(data,function(index,value){
							var str3;
							if(value.pass === 1){
								str3 = "及格";
							}else{
								str3 = "不及格";
							}
							var str2 = "<tr>" +
							"<td>" + value.coursePlan.lessionPlan.term.termName + "</td>" + 
							"<td>" + value.coursePlan.lessionPlan.course.acadamy.acdmname + "</td>" + 
							"<td>" + value.coursePlan.lessionPlan.course.cid + "</td>" + 
							"<td>" + value.coursePlan.lessionPlan.course.cname + "</td>" + 
							"<td>" + value.coursePlan.teacher.tname + "</td>" + 
							"<td>" + value.grade + "</td>" + 
							"<td>" + value.coursePlan.lessionPlan.course.credit + "</td>" + 
							"<td>" + value.coursePlan.lessionPlan.course.ctime + "</td>" + 
							"<td>" + str3 + "</td>" + 
							"</tr>";
							$("#displayTable").append(str2);
						});
					},
					error: function(req, status, error){
						
					}
				});
			});
			
			$("#selectTyear").change(function(){
				var str = "<option value=''>请选择年份</option>";
				$.ajax({
					url: "stu/selectTermByTyear",
					type: "GET",
					data: {tyear:$("#selectTyear").val()},
					success: function(data){
						$("#selectTid").empty();
						$.each(data, function(index,value){
							var str1 = "<option value='" + value.termId + "'>" + value.termName + "</option>";
							$("#selectTid").append(str1);
						});
					},
					error: function(req, status, error)	{
						console.log(req);
						$("#selectTid").empty();
						$("#selectTid").append(str);
					}
				});
			});
			
		});
	</script>
</body>
</html>